<template>
    <div ref="navBar" class="nav-bar non-bg-color">
        <div class="nav-bar-left">
            <router-link class="site-name" to="/home" style="font-family: 'Cairo', sans-serif;">{{ siteInfo.siteTitle }}</router-link>
        </div>
        <div class="nav-bar-right">
            <ul>
                <!-- <li>
                    <a class="menu-a" href="#">
                        <i class="iconfont icon-sousuo" style="font-weight: bold;"></i>
                        <span>搜索</span>
                    </a>
                </li> -->
                <li>
                    <router-link class="menu-a" to="/home">
                        <i class="iconfont icon-shouye"></i>
                        <span>首页</span>
                    </router-link>
                </li>
                <!-- <li>
                    <a class="menu-a" href="#">
                        <i class="iconfont icon-faxian"></i>
                        <span>发现</span>
                        <i class="iconfont icon-a-xiala2"></i>
                    </a>
                    <ul class="sum-menu-ul">
                        <li class="sub-menu-li">
                            <a href="#">
                                <i class="iconfont icon-xiangmuguidang" style="font-weight: bold;"></i>
                                <span>归档</span>
                            </a>
                        </li>
                        <li class="sub-menu">
                            <a href="#">
                                <i class="iconfont icon-icon_category"></i>
                                <span>分类</span>
                            </a>
                        </li>
                        <li class="sub-menu">
                            <a href="#">
                                <i class="iconfont icon-biaoqian"></i>
                                <span>标签</span>
                            </a>
                        </li>
                    </ul>
                </li> -->
                <!-- <li>
                    <a class="menu-a" href="#">
                        <i class="iconfont icon-yingyong"></i>
                        <span>娱乐</span>
                        <i class="iconfont icon-a-xiala2"></i>
                    </a>
                    <ul class="sum-menu-ul">
                        <li class="sub-menu-li">
                            <a href="#">
                                <i class="iconfont icon-xiangce" style="font-weight: bold;"></i>
                                <span>相册</span>
                            </a>
                        </li>
                        <li class="sub-menu">
                            <a href="#">
                                <i class="iconfont icon-pinglun"></i>
                                <span>说说</span>
                            </a>
                        </li>
                    </ul>
                </li> -->
                <!-- <li>
                    <a class="menu-a" href="/friendLink">
                        <i class="iconfont icon-lianjie" style="font-weight: bold;font-size: 18px;"></i>
                        <span>友链</span>
                    </a>
                </li> -->
                <!-- <li>
                    <router-link class="menu-a" to="/comment">
                        <i class="iconfont icon-zhifeiji"></i>
                        <span>评论</span>
                    </router-link>
                </li> -->
                <!-- <li>
                    <a class="menu-a" href="#">
                        <i class="iconfont icon-liuyan"></i>
                        <span>留言</span>
                    </a>
                </li> -->
                <li v-if="userInfo">
                    <a class="menu-a" style="width:25px;height:25px;transform: scale(1.3);border-radius: 50%;overflow: hidden;" href="#">
                        <img :src="userInfo.avatar" style="width:100%;height:100%;" alt="">
                    </a>
                    <ul class="sum-menu-ul">
                        <li class="sub-menu-li">
                            <a href="#" @click="logout">
                                <i class="iconfont icon-xiangmuguidang" style="font-weight: bold;"></i>
                                <span>退出</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li v-else>
                    <a class="menu-a" href="#"  @click.prevent="$store.commit('modal/showComponentName', 'LoginBox')">
                        <i class="iconfont icon-denglu"></i>
                        <span>登录</span>
                    </a>
                </li>
               

            </ul>
        </div>
    </div>
</template>

<script>

export default {
    name: 'TopNavBar',
    data() {
        return {
            preScrollTop: null,
        }
    },
    mounted() {
        window.addEventListener('scroll', this.onScroll)
    },
    destroyed() {
        window.removeEventListener('scroll', this.onScroll)
    },
    computed: {
        siteInfo() {
            return this.$store.state.home.siteInfo || {}
        },
        userInfo() {
            return this.$store.state.user.userInfo
        }
    },
    methods: {
        logout(e) {
            e.preventDefault()
            this.$store.dispatch('user/doLogout').then(res=>{
                this.$toast('success','退出成功')
            })
        },
        onScroll() {
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;

            if (scrollTop < 1) {
                this.$refs['navBar'].classList.add('non-bg-color')
            } else {
                this.$refs['navBar'].classList.remove('non-bg-color')
            }

            if (!this.preScrollTop) {
                this.preScrollTop = scrollTop
                return
            } else {
                if (scrollTop > this.preScrollTop) {
                    // console.log('向下');
                    this.$refs['navBar'].classList.add('up')
                } else {
                    // console.log('向上');
                    this.$refs['navBar'].classList.remove('up')
                }
                this.preScrollTop = scrollTop
            }
        }
    },
    components: {
    }
}
</script>

<style scoped lang="scss">
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #4c4948;
}

.non-bg-color {
    background-color: rgba(255, 255, 255, 0) !important;
}

.non-bg-color .nav-bar-right>ul>li>a {
    color: #fafafa !important;
    text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);
}

/* 子菜单上浮效果 */
@keyframes submenu-moveUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}



.nav-bar {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    padding: 0 40px 0 40px;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    height: 60px;

    z-index: 99;

    transition: all 0.5s;

    display: flex;
    align-items: center;
    justify-content: space-between;

    &.up {
        top: -60px
    }


    .nav-bar-left {
        .site-name {
            font-size: 32px;
            color: #fff;
            text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);
        }
    }

    .nav-bar-right {
        &>ul {
            display: flex;

            &>li {
                padding: 5px;
                margin: 0 2px;

                position: relative;
                display: flex;
                align-items: center;

                a.menu-a {

                    display: flex;
                    align-items: center;
                    position: relative;

                    i {
                        margin-right: 3px;
                        margin-top: 3px;
                        font-size: 16px;
                    }

                    span {
                        font-size: 16px;
                        /* 不要换行 */
                        display: inline-block;
                        width: max-content;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        bottom: -5px;
                        left: 0;
                        height: 2px;
                        width: 100%;
                        background-color: #4ab1f4;
                        width: 0;
                        transition: all 0.28s;
                    }

                    &:hover::before {
                        display: block;
                        width: 100%;
                    }
                }

                &::before {
                    /* 添加在这里，让hover触发元素和隐藏元素之间的距离能覆盖到,让hover效果正常 */
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 18px;
                    // background-color: red;
                    bottom: -18px;
                }

                &:hover {
                    .sum-menu-ul {
                        display: block;
                        animation: submenu-moveUp 0.5s;
                    }
                }

                .sum-menu-ul {
                    position: absolute;
                    right: 0;
                    top: 36px;
                    width: max-content;
                    background-color: #fff;
                    line-height: 1.6em;
                    border-radius: 5px;
                    display: none;

                    i {
                        margin-right: 8px;
                    }

                    li {
                        padding: 5px 10px;

                        &:hover {
                            color: #4ab1f4;
                            background-color: #4ab0f3;
                        }

                        &:first-child {
                            border-radius: 6px 6px 0 0;
                        }

                        &:last-child {
                            border-radius: 0 0 6px 6px;
                        }
                    }
                }
            }
        }
    }

}
</style>